<nav class="navbar navbar-inverse">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
     <style type="text/css">
     .navbar{background:#003366;}
     </style>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="font-size:large">
      <ul class="nav navbar-nav" >
          <li class="{% if request.endpoint == 'home.get_hardware' %}active{% endif %}">
             <a href="{{ url_for('home.get_hardware') }}">Hardware</a>
          </li>

      </ul>

      <ul class="nav navbar-nav navbar-right">
          {% if not session.get('user') %}
            <li class="{% if request.endpoint == 'home.register' %}active{% endif %}">
                <a href="{{ url_for('home.register') }}">Register</a>
            </li>
            <li class="{% if request.endpoint == 'home.login' %}active{% endif %}">
                <a href="{{ url_for('home.login') }}">Login</a>
            </li>
          {% else %}
              <li >
                <a href="/modify_pwd/">Hello, {{ session.get('user') }}</a>
              </li>
            <li class="{% if request.endpoint == 'home.logout' %}active{% endif %}">
                <a href="{{ url_for('home.logout') }}">Logut</a>
            </li>
          {% endif %}
      </ul>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
